<script setup>
import { Delete, EditPen } from '@element-plus/icons-vue'
import { useBuildingStore } from '@/store/super-manger/buildingStore'
import { storeToRefs } from 'pinia';
import { formatTime } from '@/utils/formatTime'
import { handleBuildingType } from '@/utils/handleBuildingType'
import { useCommonStore } from '@/store/commonStore'
import eventBus from '@/utils/eventBus.js'
import { deleteBuildingApi, updateBuildingStatus } from '@/service/buildings'
import { showElMessage, showNotifyTip } from '@/utils/showTipMessage'

const buildingStore = useBuildingStore();
const { 
  tableData, 
  panelTitle, 
  isShowBuildingPanel, 
  openPanelType,
  editId
} = storeToRefs(buildingStore);

const tableHeaderStyle = {  // 表头样式
  background: '#f5f7f6',
  height: '50px'
}

// 编辑按钮点击
const editBtnClick = (id) => {
  panelTitle.value = '编辑';
  isShowBuildingPanel.value = true; // 打开面板
  openPanelType.value = 'edit';
  editId.value = id;  // 将需要编辑的id值保存起来
}

// 删除按钮点击
const { 
    isShowTipInfo, 
    tipInfoContent,
    oplationType,
    oplationId
} = storeToRefs(useCommonStore());

const delBtnClick = (row) => {
  const { building_name, id } = row;
  isShowTipInfo.value = true;
  tipInfoContent.value = `确定删除宿舍楼【${building_name}】号楼的信息记录吗？`;
  oplationType.value = 'delete';
  oplationId.value = id;
} 

eventBus.on('deleteBtnClick', async function() {
  // 根据id值发送删除的网络请求
  const res = await deleteBuildingApi(oplationId.value);
  const { code } = res.data;
  if (code === 1) {
    const message = '删除成功！'
    showElMessage(message);
  }
})

// 修改状态值
const updateStatus = async(row, value) => {
  const { building_name, id } = row;
  const res = await updateBuildingStatus(id, value);
  const { code } = res.data;
  if (code) { // 修改成功
    let message = '';
    if (value) {  // 表示启用
      message = `【${building_name}号楼】宿舍楼成功启用！`
    } else {  // 表示停用
      message = `【${building_name}号楼】宿舍楼已经停止使用！`
    }
    showNotifyTip(message)
  }
}
</script>

<template>
  <div class="table-cpn">
    <el-table 
        :data="tableData" 
        style="width: 100%"
        border
        :header-cell-style="tableHeaderStyle"
        empty-text="暂无数据"
    >
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column label="楼栋ID" prop="id" width="180" />
        <el-table-column label="楼栋编号" width="180">
          <template #default="prop">
            <span>{{ prop.row.building_name }} 号楼</span>
          </template>
        </el-table-column>
        <el-table-column prop="building_desc" label="楼栋描述" width="300"/>
        <el-table-column label="管理员1姓名及编号" width="180">
          <template #default="prop">
            <p class="mangerName">{{ prop.row.building_mangers1 }}</p>
            <p class="mangerId">{{ prop.row.manger1_id }}</p>
          </template>
        </el-table-column>
        <el-table-column label="管理员2姓名及编号" width="180">
          <template #default="prop">
            <p class="mangerName">{{ prop.row.building_mangers2 }}</p>
            <p class="mangerId">{{ prop.row.manger2_id }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="building_type" label="楼栋类别" width="180">
          <template #default="prop">
            <span>{{ handleBuildingType(prop.row.building_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dormitory_count" label="宿舍个数" width="180"/>
        <el-table-column prop="create_time" label="创建时间" width="180">
          <template #default="prop">
            <span>{{ formatTime(prop.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template #default="prop">
            <el-tag 
              class="ml-2" 
              :type="prop.row.building_status ? 'success': ''"
            >
              {{ prop.row.building_status ? '启用中...' : '待启用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
            <template #default="prop">
              <el-button 
                type="primary" 
                plain 
                size="small"
                v-if="prop.row.building_status === 0"
                @click="updateStatus(prop.row, 1)"
              >启用</el-button>
              <el-button 
                type="danger" 
                plain 
                size="small"
                v-else
                @click="updateStatus(prop.row, 0)"
              >停用</el-button>
              <el-button 
                type="info" 
                size="small" 
                plain 
                @click="editBtnClick(prop.row.id)"
              >
                  <el-icon><EditPen/></el-icon>
                  编辑
              </el-button>
              <el-button 
                type="danger" 
                size="small" 
                plain
                @click="delBtnClick(prop.row)"  
                :disabled="prop.row.building_status !== 0"
              >
                  <el-icon><Delete/></el-icon>
                  删除
              </el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="less">  
 .mangerId {
  opacity: .6;
  font-size: 12px;
 }
</style>